<template>
    <view class="password-container">
        <view class="title">{{$t('mine.wallet.verifyPassword.title')}}</view>
        <view class="tips">{{$t('mine.wallet.verifyPassword.tips')}}</view>
        <view class="input-wrap">
            <wd-password-input v-model="password" :focused="showKeyboard" @focus="showKeyboard = true" />
        </view>
        <view :class="['btns', password.length===6 && 'active']" @click="onSubmit">{{$t('common.submit')}}</view>
        <view class="keyboard-wrap"><wd-number-keyboard :hideOnClickOutside="false" v-model="password" v-model:visible="showKeyboard" :maxlength="6" @blur="onBlur" /></view>
    </view>

</template>

<script setup lang="ts">
import { ref } from 'vue';
import { NavigateTo,showToast } from '@/utils/common';
import { toLang } from '@/utils/lang';
import { verifyCashPwd } from '@/api/mine';
const emits = defineEmits(['onSuccess']);
const props = defineProps({
    type: {
        type: String,
        default: ''
    }
});
const password = ref<string>('');
const showKeyboard = ref<boolean>(true);


//提交
const onSubmit = async() => {
    //如果是组件模式，直接返回密码
    if(props.type === 'component'){
        emits('onSuccess',password.value);
        return;
    }
    if (password.value.length < 6) return;
    const res = await verifyCashPwd({cashPwd:password.value});
    if(res.code !== 200 || !res.data){
        showToast({ title: toLang('mine.wallet.verifyPassword.error') });
        return;
    };
    NavigateTo('/pages/mine/wallet/setting');
};

</script>
<style lang="scss" scoped>
.password-container {
    background: #fff;
    height: 980rpx;
    border-radius: 30rpx 30rpx 0 0;
    padding: 0 30rpx;
    .title {
        padding: 70rpx 0;
        text-align: center;
        font-size: 46rpx;
        font-weight: 600;
    }
    .tips {
        text-align: center;
        font-size: 30rpx;
        color: #646566;
    }
    .input-wrap {
        height: 100rpx;
        width: 660rpx;
        margin: 40rpx auto 0;
        position: relative;
       
        

       
        .content {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
        }
        
    }
    ::v-deep .wd-input__suffix {
        display: none;
    }
    ::v-deep .wd-input {
        background: none;
    }
   
    .form-tips {
        margin-top: 30rpx;
        display: flex;
        font-size: 28rpx;
        .all-text {
            margin-left: 20rpx;
            color: #0866ff;
        }
    }

    .btns {
        margin-top: 60rpx;
        background: #e4e6eb;
        color: #bcc0c4;
        height: 98rpx;
        display: flex;
        border-radius: 24rpx;
        align-items: center;
        justify-content: center;
    }
    .active {
        background: #0866ff;
        color: #fff;
        &:active {
            opacity: 0.7;
        }
    }
}
</style>
